<!--
 * @Description: 左侧文件列表组件
 -->
<template>
  <div class="filelist-container">
    <!-- 滚动列表 -->
    <el-scrollbar ref="fileList" class="file-list" wrap-class="scrollbar-filelist" :noresize="false" tag="ul">
      <template v-for="(item, index) in fileList">
        <li
          :key="index"
          class="file-item"
          :class="{ active: activeIndex === index }"
          @click="onClick(index)"
          @contextmenu.prevent="openMenu(item, index, $event)"
        >
          <i class="el-icon-document item-icon" />
          <span v-if="item.isTop" class="is-top">Top</span>
          <p class="item-title">{{ item.title }}</p>
          <p class="item-time">{{ item.updatedAt }}</p>
        </li>
      </template>
    </el-scrollbar>
    <!-- 右键菜单 -->
    <ul v-if="visible" :style="{ left: `${left}px`, top: `${top}px` }" class="contextmenu">
      <li @click="handleFileTop">
        <i class="menu-icon" :class="isTop ? 'el-icon-circle-close' : 'el-icon-top'" />
        <span>{{ isTop ? '取消置顶' : '置顶' }}</span>
      </li>
      <li @click="onDelete">
        <i class="el-icon-delete menu-icon" />
        <span>删除</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FileList',
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      visible: false,
      left: 0,
      top: 0,
      isTop: false,
    };
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu);
      } else {
        document.body.removeEventListener('click', this.closeMenu);
      }
    },
  },
  methods: {
    // 点击列表项
    onClick(index) {
      this.$emit('update:activeIndex', index);
      this.$emit('itemClick', index);
    },

    // 右键菜单
    openMenu(item, index, event) {
      this.isTop = item.isTop;
      const menuWidth = 90;
      const { offsetWidth } = this.$refs.fileList.$el;
      const maxLeft = offsetWidth - menuWidth;
      this.left = Math.min(event.clientX, maxLeft);
      this.top = event.clientY;
      this.visible = true;
      this.onClick(index);
    },

    // 关闭右键菜单
    closeMenu() {
      this.visible = false;
    },

    // 删除笔记
    onDelete() {
      this.$confirm('此操作将永久删除该笔记, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { _id } = this.fileList[this.activeIndex];
          this.$db.markdown
            .remove({ _id })
            .then((num) => {
              this.$message.success(`删除了${num}个项目`);
              this.$emit('refresh');
            })
            .catch(() => {
              this.$message.error('删除失败');
            });
        })
        .catch(() => {});
    },

    // 置顶/取消置顶
    handleFileTop() {
      const { _id, isTop } = this.fileList[this.activeIndex];
      this.$db.markdown.update({ _id }, { $set: { isTop: !isTop } }).then(() => {
        this.$emit('refresh');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.file-list {
  user-select: none;
  ::v-deep .scrollbar-filelist {
    height: calc(100vh - 56px) !important;
    overflow-x: hidden !important;
  }
  ::v-deep .el-scrollbar__bar {
    opacity: 1;
    &.is-vertical {
      right: 0px;
      width: 5px;
      .el-scrollbar__thumb {
        background-color: rgba(144, 147, 153, 0.5);
      }
    }
  }
  .file-item {
    display: flex;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eaeefb;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &.active {
      background-color: #f5f5f5;
    }
    .item-icon {
      margin-left: 20px;
      margin-right: 12px;
    }
    .item-title {
      flex: 1;
      margin-right: 5px;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .item-time {
      width: 80px;
      font-size: 12px;
    }
    .is-top {
      position: absolute;
      left: -14px;
      top: -3px;
      font-size: 12px;
      background-color: #409eff;
      color: #fff;
      padding: 6px 13px 2px;
      transform: rotate(-45deg);
    }
  }
}

// 菜单列表样式
.contextmenu {
  position: absolute;
  margin: 0;
  padding: 5px 0;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  list-style-type: none;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  z-index: 3000;
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      color: #66b1ff;
      background: #ecf5ff;
    }
    .menu-icon {
      font-size: 14px;
      margin-right: 5px;
    }
  }
}
</style>
